<template>
	<section class="section-one" @click="navigateToNext">
		<span class="corner-number">5</span> <!-- 添加数字 "1" 的标签 -->
		<h2>长期记忆</h2>
		<p>根据艾宾浩斯记忆曲线，制定的学习记录和复习记录。</p>
	</section>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'; // 引入 vue-router 的 useRouter

	const router = useRouter(); // 获取路由实例

	const navigateToNext = () => {
		router.push({
			name: 'learn'
		});
	};
</script>

<style scoped>
	.section-one {
		background: linear-gradient(135deg, #265a99, #f6f6f6);
		/* 渐变背景 */
		color: white;
		/* 文本颜色为白色以提高可读性 */
		padding: 20px;
		border-radius: 8px;
		text-align: center;
		position: relative;
		/* 使内部绝对定位的元素相对该部分定位 */
		cursor: pointer;
		/* 鼠标悬停时显示为点击手型 */
	}

	.corner-number {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 距离顶部的距离 */
		left: 10px;
		/* 距离左边的距离 */
		color: black;
		/* 设置颜色为粉色 */
		font-family: 'Songti SC', '宋体', serif;
		/* 设置字体为宋体 */
		font-size: 24px;
		/* 可以根据需要调整字体大小 */
		font-weight: bold;
	}
</style>